
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@fluentui/make-styles
Advanced tools
Make Styles components for Fluent UI React
These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.
Styles are computed for each part of each component, including duplicate calculations when there are multiple instances of the same component on the page. Even with caching it slow compared to native CSS.
Current version of makeStyles()
is heavily inspired by Material UI and depends on file evaluation order which makes complicated to use it with React Suspense, for example: https://codesandbox.io/s/kind-davinci-xvwxg
There is also no way to solve CSS specificity issues for styles overrides.
For Northstar: Style files are currently hard to read and manage due to their complexity. The complexity is caused by heavily nested conditionals and the use of abstractions (like helper functions). Styles also decoupled from components that caused an additional indirection.
The new iteration of makeStyles()
splits the expensive part (processing styles, generating classnames) and the cheap part (merging classnames), expensive part can be done build time. Code also intentionally separated to highlight required part of makeStyles()
and runtime. A production version of makeStyles()
currently is less than 200 LoC.
It uses the similar side effect approach as in useCSS
hook and Emotion (#14470) (passing down classnames but referrencing a dictionary when merging).
We use hash based atomic classnames, this makes deterministic (vs Fela is sequential = non-deterministic), it simplifies support server side rendering.
Tokens (theme, siteVariables) are injected as CSS variables, can easily fallback to runtime evaluation in IE 11 without any change required on component/overrides side. However, this will require bundling of runtime part.
Anything can change based on feedback, but current API is shown below:
const useStyles = makeStyles([
[null, { color: 'red' }],
[selectors => selectors.color === 'green', { color: 'green' }]
])
//
useStyles() // returns a classname for "color: red"
useStyles({ color: 'green' }} // returns a classname for "color: green"
It removes any conditions in styles and and allows easily transform them to CSS.
This allows to match styles in a single loop i.e. the best performance option that we have.
I also evaluated matchers approach (https://github.com/microsoft/fluent-ui-react/pull/1301), but we need have to compare there two objects:
// ⚠️ not a real API
const useStyles = makeStyles([
[null, { color: 'red' }],
[{ color: 'green' }, { color: 'green' }],
]);
Another idea that was not enough performant is to transform these matchers to bitmasks. It also was slower as we need to transform user's input masks which gives us a second loop 🐌:
const masks = {
default: 0, // null
colorgreen: 1,
};
It also made code complicated for understanding and debugging.
There is a separate API makeStaticStyles
for this case.
It can be used to register styles object:
makeStaticStyles({
'@font-face': {
fontFamily: 'Open Sans',
src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
},
body: {
background: 'red',
},
/**
* ⚠️ nested and pseudo selectors are not supported for this scenario via nesting
*
* Not supported:
* .some {
* .class { ... },
* ':hover': { ... }
* }
*
* Supported:
* '.some.class': { ... }
* '.some.class:hover': { ... }
*/
});
Or string:
makeStaticStyles('body { background: red; } .foo { color: green; }');
Or array of styles object/string:
makeStaticStyles([
{
'@font-face': {
fontFamily: 'Open Sans',
src: `url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff")`,
},
},
{
'@font-face': {
fontFamily: 'My Font',
src: `url(my_font.woff)`,
},
},
});
/make-styles
/babel - contains babel plugin/preset for built time - 0 kb
/runtime - in dev contains all required utils, in prod - noop i.e. 0kb
/runtime-ie11 - in dev - alias to runtime, in prod - optimized runtime 20kb
FAQs
Experimental utility for creating css styles/classes.
The npm package @fluentui/make-styles receives a total of 220 weekly downloads. As such, @fluentui/make-styles popularity was classified as not popular.
We found that @fluentui/make-styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 13 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.